<template>
  <div>
    <div class="flex flex-a-c headerBox" @click="gotoThat">
      <div class="title">设备数量</div>
      <a-icon type="right" />
    </div>

    <!--  内容区域  -->
    <div class="quantity">
      <div>
        <h5>{{ model.all || 0 }}</h5>
        <p>全部</p>
      </div>
      <div>
        <h5 :style="{ color: alarmStatues[0] }">
          {{ model.running || 0 }}
        </h5>
        <p>运行</p>
        <a :style="{ 'background-color': alarmStatues[0] }"></a>
      </div>
      <div>
        <h5 :style="{ color: alarmStatues[1] }">
          {{ model.stop || 0 }}
        </h5>
        <p>待机</p>
        <a :style="{ 'background-color': alarmStatues[1] }"></a>
      </div>
      <div>
        <h5 :style="{ color: alarmStatues[2] }">
          {{ model.alarm || 0 }}
        </h5>
        <p>报警</p>
        <a :style="{ 'background-color': alarmStatues[2] }"></a>
      </div>
      <div>
        <h5 :style="{ color: alarmStatues[3] }">
          {{ model.offline || 0 }}
        </h5>
        <p>离线</p>
        <a :style="{ 'background-color': alarmStatues[3] }"></a>
      </div>
    </div>
  </div>
</template>

<script>
import api from "@/api/apiServer";
import { alarmStatues } from "./tabConfig";
export default {
  data() {
    return { alarmStatues, model: {} };
  },
  mounted() {
    this.getStateCount();
  },
  methods: {
    // 获取设备数量
    async getStateCount() {
      const { data: res } = await api.StateCount({});
      this.model = res;
    },
    gotoThat() {
      this.$store.commit("board/HeadNavType", 2);
      localStorage.setItem("navType", 2);
      this.$router.push("/equipmentList");
    }
  }
};
</script>

<style lang="less" scoped>
.headerBox {
  margin: 20px 0 10px 0;
  .title {
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    margin: 0 4px 0 0;
  }
}

.quantity {
  width: 100%;
  border-radius: 6px;
  overflow: hidden;
  padding: 20px 10px;
  background: #fff;
  display: flex;
  align-items: center;
  div {
    width: 17%;
    margin: 0 1.5%;
    border: 1px solid #e6eaee;
    border-radius: 2px;
    text-align: center;
    position: relative;
    padding: 15px 0;
    box-sizing: border-box;
  }

  h5 {
    margin: 0 !important;
    font-size: 36px;
    font-family: Proxima Nova;
    font-weight: 400;
    color: #289df5;
    line-height: 42px;
  }

  p {
    margin: 0 !important;
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    line-height: 22px;
  }

  a {
    margin: 0 !important;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #289df5;
  }
}
</style>
